<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./index.css">
  <title>Day One</title>
</head>
<body>
  <div class="panel">
    <div class="container">
      <!-- Typography -->
      <div class="card">
        <p class="title">TYPOGRAPHY</p>
        <P class="text-bold">Make me bold</P>
        <P class="text-italic">Make me italic</P>
        <br>
        <p class="arial-font">I'm from the Arial font family!</p>
        <p class="nroman-font">And I'm from the Times New Roman font family!</p>
        <br>
        <p class="underlined">Make this text be underlined</p>
        <p class="through">And put a line through this one</p>
      </div>
      <!-- Typography end -->
      <!-- Headings -->
      <div class="card">
        <p class="title">HEADING</p>
        <h1>This is a &lt;h1&gt; tag</h1>
        <h2>This is a &lt;h2&gt; tag</h2>
        <h3>This is a &lt;h3&gt; tag</h3>
      </div>
      <!-- Headings end -->
      <!-- Colors -->
      <div class="card">
        <p class="title">COLORS</p>
        <p class="orange">Color me orange!</p>
        <div class="square orange fill"></div>
        <p class="purple">Color me purple!</p>
        <div class="circle purple fill"></div>
      </div>
      <!-- Colors end -->
       <!-- Buttons -->
      <div class="card">
        <p class="title">BUTTONS</p>
        <p>Default</p>
        <button>Button</button>
        <p>Hovered</p>
        <button class="hovered">Button</button>
        <p>Active</p>
        <button class="actived">Button</button>
      </div>
      <!-- Buttons end -->
    </div>
  </div>
  <script src="./index.js"></script>
</body>
</html>